iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 30
0
Modern Web

網頁技術學習心得系列 第 30

JavaScript 進階筆記三(Primitive type VS Object type)

  • 分享至 

  • xImage
  •  

Primitive type VS Object type

primitive 是不可改變的(Immutable),object 是可以改變的

var str = 'Hello world'
str.toUpperString()
console.log(str)
//'Hello world'
// primitive type 下執行原生 function,都不會改變到原本位址的值,都會回傳新的變數來取代。

var arr = [1]
arr.push(2)
console.log(arr)
//[1, 2]
// object type 下執行原生 function,就會改變到原本位址的值。

在 ES6 const 常數的宣告也是一樣的

const obj = {
    number: 10
}
const obj2 = obj
obj2.number = 20
console.log(obj, obj2)
// 正常執行
// { number: 20 } { number: 20 }
const obj = {
    number: 10
}
const obj2 = obj
obj2 = {
  str: 'str'
}
console.log(obj, obj2)

// 出現 Error log

  obj2 = {
     ^
TypeError: Assignment to constant variable.
    at Object.<anonymous> (/Users/rock/.bitnami/stackman/machines/xampp/volumes/root/htdocs/rock/week16-js/type.js:50:6)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47

兩種型態賦值(=)的差別

Primitive type

var a = 10
var b = a
console.log(a, b)
//10 10

b = 20 
console.log(a, b)
//10 20

對於 primitive type 的資料儲存,取值並儲存在新宣告的變數。

會將 obj & obj2 call by value
a: 10
b: 10
當賦值 b = 20,b 會儲存成一個新的值。
a: 10 
b: 20 

Object type

var obj = {
    number: 10
}
var obj2 = obj
console.log(obj, obj2)
//{ number: 10 } { number: 10 }

obj2.number = 20
console.log(obj, obj2)
//{ number: 20 } { number: 20 }

對於 Object type 的資料儲存

將變數指向儲存值的記憶體位置

01x0 = {
  number: 10
}
會將 obj & obj2 以址取值
obj = 01x0
obj2 = 01x0

當賦值 obj2.number = 20,會直接改變記憶體位址 01x0 儲存的值,所以

obj.number = 20
obj2.number = 20


當用 = 賦值 obj2 時,會存到新的記憶體,將再 obj2 指向新的記憶體位置。

obj2 = {
    str: 'str'
}
此時,
obj = 01x0
boj2 = 02x0

console.log(obj, obj2)
//{ number: 20 } { str: 'str' }

上一篇
javasScript 進階筆記二 (object.prototype.call)
系列文
網頁技術學習心得30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言